import React from 'react'
import { withRouter } from 'react-router-dom'

import './style.css'

const OrderListItem = ({ history }) => {
    const toInfo = () => {
        history.push('/orderInfo')
    }
    return (
        <div 
            className='orderListItem'
            onClick={toInfo}
        >
            <div className='orderListItem-num'>
                <div className='num'>订单编号: 123456</div>
                <div className='status'>待发货</div>
            </div>


            <ul className='orderListItem-list'>
                <li>
                    <div>
                        <img src="https://xinglong.tech/logo.jpg" />
                        <span className='orderListItem-list_name'>商品名称</span>
                    </div>
                    <div>
                        <span>¥: 99.99</span>
                        <span>x2</span>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="https://xinglong.tech/logo.jpg" />
                        <span className='orderListItem-list_name'>商品名称</span>
                    </div>
                    <div>
                        <span>¥: 99.99</span>
                        <span>x2</span>
                    </div>
                </li>
            </ul>

            <div className='orderListItem-sum'>
                <span>总金额</span>
                <span>¥:99.99</span>
            </div>
            <div className='orderListItem-pay'>
                <button className='btn'>取消订单</button>
                <button className='btn'>付款</button>
            </div>

        </div>
    )
}

export default withRouter(OrderListItem)
